<template>
    <div class="boomIcon-wrap" ref="boomIconWrap">
  
    </div>
  </template>
  
  <script>
    export default {
      name: "BoomIcon",
      props: {
        successLoadedIconGroup: Array, // 加载完成的icon
        allIconIsLoaded: Boolean, // 加载完成的标识
      },
      data() {
        return {
          _directionGroup: [], // 所有方向集合
        }
      },
      mounted() {
        const { width } = document.documentElement.getBoundingClientRect();
        const pieceOne = width / 10;
        this._directionGroup = [];
        for (let i = 8; i >= 0; i--) {
          this._directionGroup.push([i * pieceOne + this.getRandom(0, 20), (9 - i) * pieceOne + this.getRandom(0, 20)]);
        };
      },
      methods: {
        boom() {
          if (!this.allIconIsLoaded) return false;
          clearTimeout(this.timeId);
          this.timeId = setTimeout(() => {
            this.$refs.boomIconWrap.innerHTML = '';
          }, 2000);
          // 随机选三个方向发射
          const randomThreeIndex = [];
          const randomThreeDirection = [];
          while(randomThreeIndex.length < 3) {
            const randomIndex = Math.floor(Math.random() * 8);
            if (!randomThreeIndex.includes(randomIndex)) {
              randomThreeIndex.push(randomIndex);
              randomThreeDirection.push(this._directionGroup[randomIndex]);
            };
          }
          // 创建节点
          this.createNode(randomThreeDirection);
        },
        createNode(randomThreeDirection) {
          randomThreeDirection.forEach(direction => {
            const boomWrap = this.$refs.boomIconWrap;
            const wrapNode = document.createElement('div');
            wrapNode.classList.add('icon-wrap');
            const innerNode = document.createElement('div');
            innerNode.classList.add('icon');
            wrapNode.addEventListener("transitionend", () => wrapNode.remove());
            wrapNode.appendChild(innerNode);
            boomWrap.appendChild(wrapNode);
            this.$nextTick(() => {
              setTimeout(() => {
                const [x, y] = direction;
                wrapNode.style.transform = `translateX(-${x}px)`;
                innerNode.style.transform = `translateY(-${y}px) rotate(360deg)`;
                innerNode.style.background = `url(${this.successLoadedIconGroup[Math.floor(this.getRandom(0, 6))].currentSrc}) center/100% no-repeat`;
                innerNode.classList.add('ani');
              }, 20);
            })
          })
        },
        // 获取指定区间随机数（a < b）
        getRandom(a, b) {
          return Math.random() * (b - a) + a;
        }
      }
    };
  </script>
  
  <style lang="less" scoped>
    .boomIcon-wrap {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      /deep/ .icon-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 2s linear 0s;
        .icon {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          transition: all 2s cubic-bezier(.25,.82,.61,1.77) 0s;
          &.ani {
            animation: icon-hide-ani .5s ease 1.5s forwards;
            @keyframes icon-hide-ani {
              0% {
                opacity: 1;
              }
              100% {
                opacity: 0;
              }
            }
          }
        }
      }
    }
  </style>